<template>
  <div class="main-container">
    <nav-bar :title="title"></nav-bar>
    <van-row class="main-container-top" gutter="20" v-if="$route.path !== `/propertyManagement/Record`">
      <van-col span="12" v-for="(item, index) in entryBar" :key="index">
        <div @click="handleJump(item)" class="main-container-top-item" :class="'item' + (index + 1)">
          <p>{{ item.name }}</p>
          <img :src="item.pic" :alt="item.path" />
        </div>
      </van-col>
    </van-row>
    <div class="main-container-bottom">
      <van-popup v-model="searchFormShow" position="right" style="height: 100%; padding: 10px; width: 70%">
        <div class="main-container-bottom-search">
          <p class="main-container-bottom-search-text">更多查询条件：</p>
          <van-cell-group>
            <van-field v-model="formParams.gridName" label="物业名称" placeholder="请输入" />
            <van-field v-model="formParams.pointName" label="点位名称" placeholder="请输入" />
            <van-field
              readonly
              clickable
              name="datetimePicker"
              v-model="formParams.startTime"
              label="开始时间"
              placeholder="请选择"
              @click="dateOpenPopup('startTime')"
            />
            <van-field
              readonly
              clickable
              name="datetimePicker"
              v-model="formParams.endTime"
              label="结束时间"
              placeholder="请选择"
              @click="dateOpenPopup('endTime')"
            />
            <van-field
              readonly
              clickable
              name="picker"
              v-model="formParams.inspectionResultCompanyName"
              label="安全隐患"
              placeholder="请选择"
              @click="dictOpenPopup('inspectionResultCompany')"
            />
            <van-button style="margin: 10px 0" type="info" block @click="init">查询</van-button>
            <van-button block @click="handleClear">重置</van-button>
            <van-button style="margin-top: 10px" block @click="searchFormShow = false">关闭</van-button>
          </van-cell-group>
        </div>
      </van-popup>
      <van-popup v-model="dictPopupShow" round position="bottom" @close="dictValue = ''">
        <van-picker
          show-toolbar
          :default-index="dictData[dictType] && dictData[dictType].findIndex(o => o.code === dictValue)"
          :columns="dictData[dictType]"
          value-key="description"
          @cancel="dictPopupShow = false"
          @confirm="dictOnConfirm"
        />
      </van-popup>
      <van-popup v-model="datePopupShow" round position="bottom" @close="date = new Date()">
        <van-datetime-picker
          v-model="date"
          type="date"
          title="选择年月日"
          @cancel="datePopupShow = false"
          @confirm="dateOnConfirm"
        />
      </van-popup>
      <div class="main-container-bottom-header">
        <p class="main-container-bottom-header-left">巡检记录</p>
        <p class="main-container-bottom-header-right" @click="searchFormShow = true">更多 ></p>
      </div>
      <div class="main-container-bottom-table">
        <van-row class="table-header">
          <van-col :span="7">物业名称</van-col>
          <van-col :span="7">点位名称</van-col>
          <van-col :span="6">巡查时间</van-col>
          <van-col :span="4" align="center">操作</van-col>
        </van-row>
        <van-row class="table-body-item" v-for="(item, index) in tableData" :key="index">
          <van-col :span="7">
            <p>{{ item.gridName }}</p>
          </van-col>
          <van-col :span="7">
            <p>{{ item.pointName }}</p>
          </van-col>
          <van-col :span="6">
            <p>{{ item.inspectionTime }}</p>
          </van-col>
          <van-col :span="4" align="center">
            <p class="operation" @click="handleTableDetail(item)">查看</p>
          </van-col>
        </van-row>
        <van-pagination
          v-model="formParams.pageNumber"
          :total-items="formParams.totalSize"
          :items-per-page="formParams.pageSize"
          @change="pageChange"
        >
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
          <template #page="{ text }">{{ text }}</template>
        </van-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import CampusSecurity from '@/api/campussecurity'
import SelectPopup from '@/mixins/selectPopup'
import { formatTimes } from '@/libs/tool'

export default {
  mixins: [SelectPopup],
  data() {
    return {
      title: '物业管理',
      entryBar: [
        {
          name: '诉求服务',
          path: '/propertyManagement/AttendanceClock',
          pic: require('@/assets/images/inspectVisit/base/service.png')
        },
        {
          name: '物管巡逻',
          path: '/propertyManagement/SafetyInspection',
          pic: require('@/assets/images/inspectVisit/base/management.png')
        }
      ],
      tableData: [],
      dictTypes: 'inspectionResultCompany',
      searchFormShow: false,
      formParams: {
        gridType: '2',
        gridCode: '',
        gridName: '',
        pointName: '',
        startTime: '',
        endTime: '',
        inspectionResult: '',
        inspectionResultCompany: '',
        inspectionResultCompanyName: '',
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10,
        totalSize: 0
      }
    }
  },
  computed: {},
  created() {
    this.init()
    this.getDict(this.dictTypes)
  },
  methods: {
    init() {
      this.tableData = []
      this.formParams.inspectionResult = this.formParams.inspectionResultCompany
      this.formParams.recordSize = this.formParams.pageSize * (this.formParams.pageNumber - 1)
      CampusSecurity.Api.queryRecord(this.formParams).then(res => {
        if (res.data) {
          this.tableData = res.data.data
          this.formParams.totalSize = res.data.total
        }
      })
    },
    pageChange() {
      this.init()
    },
    handleClear() {
      this.formParams = {
        gridType: '2',
        gridCode: '',
        gridName: '',
        pointName: '',
        startTime: '',
        endTime: '',
        inspectionResult: '',
        inspectionResultCompany: '',
        inspectionResultCompanyName: '',
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10,
        totalSize: 0
      }
      this.init()
    },
    handleJump(item) {
      this.$router.replace({
        path: item.path,
        query: { ...this.$route.query, gridType: 2 }
      })
    },
    handleTableDetail(item) {
      this.$router.push({
        path: '/propertyManagement/Record/report',
        query: {
          code: item.code,
          inspectionPointName: item.pointName,
          inspectionTime: formatTimes.formatDate(new Date(item.inspectionTime)),
          type: 'detail'
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.main-container {
  width: 100%;
  padding-top: 44px;
  background-color: #f6f6f6;

  &-top {
    width: 100%;
    margin-top: 30px;
    box-sizing: border-box;
    padding: 80px 30px;
    background-color: #fff;

    &-item {
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 0px 2px 6px 0px rgba(55, 194, 187, 0.3), 0px 0px 4px 1px rgba(0, 0, 0, 0.07);
      border-radius: 4px;

      &.item1 {
        background-color: #37c2bb;
      }

      &.item2 {
        background-color: #3b99da;
      }

      p {
        font-size: 30px;
        font-weight: 600;
        color: #ffffff;
        margin-right: 20px;
      }

      img {
        padding-top: 40px;
      }
    }
  }

  &-bottom {
    padding: 0 30px;
    background-color: #fff;
    margin-top: 20px;

    &-header {
      height: 100px;
      line-height: 100px;
      display: flex;
      justify-content: space-between;

      &-left {
        font-size: 32px;
        font-weight: 500;
        color: #000000;
      }

      &-right {
        font-size: 28px;
        font-weight: 400;
        color: #3cbdd0;
      }
    }

    &-search {
      &-text {
        font-size: 30px;
        line-height: 60px;
      }
    }

    &-table {
      .table-header {
        height: 100px;
        line-height: 100px;
        background-color: #e28556;
        font-size: 30px;
        padding: 0 10px;
        color: #fff;
      }

      .table-body-item {
        height: 100px;
        line-height: 100px;
        padding: 0 10px;
        font-size: 30px;

        p {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        &:nth-child(2n + 1) {
          background-color: #f3f3f3;
        }

        .operation {
          color: #37c2bb;
        }
      }
    }

    .van-pagination {
      margin-top: 20px;
    }
  }
}
</style>
